<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的购物车</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>

    <style type="text/css">
        table {
            margin: 0 auto;
            width: 60%;
            border-collapse: collapse;
        }
    </style>
</head>
<body>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark">
  <div class="container-fluid">
    <div class="collapse navbar-collapse" id="mynavbar">
      <ul class="navbar-nav me-auto">
        <li class="nav-item">
          <a class="nav-link" href="/hello02">首页</a>
        <li class="nav-item">
          <a class="nav-link " href="/index2">元音查询</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/index3">名字全称</a>
        </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle active" href="/goodslist" id="navbardrop" data-bs-toggle="dropdown">
                购物
              </a>
              <div class="dropdown-menu">
                <a class="dropdown-item" href="/goodslist">全部商品</a>
                  <hr class="dropdown-divider">
                <a class="dropdown-item" href="/goodslist">香薰蜡烛</a>
                <a class="dropdown-item" href="/goodslist">香薰套装</a>
                <a class="dropdown-item" href="/goodslist">扩香片</a>
                  <a class="dropdown-item" href="/goodslist">香挂</a>
                  <hr class="dropdown-divider">
                <a class="dropdown-item" href="/login">我的购物车</a>

              </div>
            </li>

      </ul>
      <form class="d-flex">
        <input class="form-control me-2" type="text" placeholder="Search">
        <button class="btn btn-primary" type="button">搜索</button>
      </form>
    </div>
  </div>
</nav>

<main class="container">
    <h2 class="text-center">商品介绍</h2>
  <div class="row mb-2">
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relativ">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">商品</strong>
          <h3 class="mb-0">扩香石</h3>
          <div class="mb-1 text-muted">价格：￥180</div>
          <p class="card-text mb-auto">玲珑剔透的晶石，是大自然的鬼斧神工<br>滴入精油，烁烁闪光，散发迷人芬芳</p>
        </div>
        <div class="col-auto d-none d-lg-block">
            <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mcSZ6owW9HI15Xrm4ztHm5CuGpZFm5sl5LCARPtBiqjiTAtTK6YVKeklmlNpKTdTD7cguY8NZbnnzAtj9QnaGFyk!/r" class="d-block" style="width: 160px ">
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">商品</strong>
          <h3 class="mb-0">香薰套装</h3>
          <div class="mb-1 text-muted">价格：￥380</div>
          <p class="card-text mb-auto">前调杜松子和松木的冷冽气息，若即若离<br>中调带来清新湿润的水汽感，似赤足淌过林间小溪<br>尾调苔藓的绿意被雪松木质感包围，走过一片北欧森林</p>
        </div>
        <div class="col-auto d-none d-lg-block">
            <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mcSZ6owW9HI15Xrm4ztHm5Cuz80d115Qi58TnPTT7BB.LqPFNbOrwxFpQTZzFHWyiCO2zx5VFIPCwywQZL2p2nIE!/r" class="d-block" style="width: 150px ">
        </div>
      </div>
    </div>
  </div>



  <div class="row mb-2">
    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relativ">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">商品</strong>
          <h3 class="mb-0">扩香片</h3>
          <div class="mb-1 text-muted">价格：￥100</div>
          <p class="card-text mb-auto">城市系列：<br>曼谷雨季<br>内置天然风船葛、白晶菊<br> </p>
        </div>
        <div class="col-auto d-none d-lg-block">
            <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mca8jzck2rd4AsKAv3sr3aGHjptZ8A6psx98eoG.D*8r6BktYxUbGKtBH3WYLlMKn5e2PLHD3OHdRpIzTJDN1mQA!/r" class="d-block" style="width: 150px ">
        </div>
      </div>
    </div>

    <div class="col-md-6">
      <div class="row g-0 border rounded overflow-hidden flex-md-row mb-4 shadow-sm h-md-250 position-relative">
        <div class="col p-4 d-flex flex-column position-static">
          <strong class="d-inline-block mb-2 text-primary">商品</strong>
          <h3 class="mb-0">香挂</h3>
          <div class="mb-1 text-muted">价格：￥280</div>
          <p class="card-text mb-auto">将石膏挂片握在手心，对着它喷洒3-5次香水<br>静置片刻，待香气沁入石膏挂片<br>就是一块精致小巧的香薰挂片</p>
        </div>
        <div class="col-auto d-none d-lg-block">
            <img src="http://r.photo.store.qq.com/psc?/V53CTxeD0fP8dC1ciWHO2ZXtrp2keVgt/45NBuzDIW489QBoVep5mcU0aGClOs*AdjAlXS48AB0dqihkHBM5BL*WIUS2bh21jif3DvqivDnRacHYMn*F2rDqCpYo.Lu5S.b2ljJpwU90!/r" class="d-block" style="width: 100px ">
        </div>
      </div>
    </div>
  </div>

</main>



<div class="container mt-3 text-center">
	<table id="stuff_table">
		<thead>
			<tr>
				<th>商品</th>
				<th>单价</th>
				<th>库存</th>
				<th>好评率</th>
				<th>操作</th>
			</tr>
		</thead>
			<tr>
				<td class="name">扩香石</td>
				<td>180</td>
				<td>充足</td>
				<td>98%</td>
				<td align="center">
                    <button class=" btn btn-outline-secondary" type="input"  onclick="add_shoppingcar(this);">加入购物车</button>
				</td>
			</tr>
			<tr>
				<td class="name">香薰套装</td>
				<td>380</td>
				<td>充足</td>
				<td>98%</td>
				<td align="center">
                    <button class=" btn btn-outline-secondary" type="input"  onclick="add_shoppingcar(this);">加入购物车</button>
				</td>
			</tr>
			<tr>
				<td class="name">扩香片</td>
				<td>100</td>
				<td>充足</td>
				<td>98%</td>
				<td align="center">
                    <button class=" btn btn-outline-secondary" type="input"  onclick="add_shoppingcar(this);">加入购物车</button>
				</td>
			</tr>
			<tr>
				<td class="name">香挂</td>
				<td>280</td>
				<td>充足</td>
				<td>98%</td>
				<td align="center">
                    <button class=" btn btn-outline-secondary" type="input"  onclick="add_shoppingcar(this);">加入购物车</button>
				</td>
			</tr>
    </table>
<br>
	<h2>购物车</h2>
	<table>
		<thead>
			<tr>
				<th>商品</th>
				<th>单价</th>
				<th>数量</th>
				<th>金额</th>
				<th>删除</th>
			</tr>
		</thead>
		<tbody id="goods">
		</tbody>
		<tfoot>
			<tr>
				<td colspan="3" align="center">总计</td>
				<td id="total"></td>
				<td></td>
			</tr>
		</tfoot>
	</table>
       <form class="form-signup form-inline" action="/buy" method="post">
           <button class=" btn btn-outline-secondary" type="submit" id="btn" value="点击" name="sub" >购买</button>
       </form>
</div>


<script type="text/javascript">
function add_shoppingcar(btn) {
	var tr = btn.parentNode.parentNode;
	var tds = tr.getElementsByTagName("td");
	var name = tds[0].innerHTML;
	var price = tds[1].innerHTML;
	var tbody = document.getElementById("goods");
	var row = tbody.insertRow();
	row.innerHTML = "<td>"+name+"</td>"+
	"<td>"+price+"</td>"+
	"<td align='center'>"+
		"<input type='button' value='-' onclick='change(this,-1);' />"+
		"<input type='text' id='num' size='1' readonly='readonly' value='1'/>"+
		"<input type='button' value='+' onclick='change(this,+1);' />"+
	"</td>"+
	"<td>"+price+"</td>"+
	"<td align='center'>"+
		"<input type='button' value='X' onclick='del(this);'/>"+
	"</td>";
	total();
}

function del(obj) {
	var tr = obj.parentNode.parentNode;
	var tbody = tr.parentNode;
	tbody.removeChild(tr);
	total();
}

function total() {
	var tbody = document.getElementById("goods");
	var trs = tbody.getElementsByTagName("tr");
	var sum = 0;
	for(var i=0;i<trs.length;i++){
		var tds = trs[i].getElementsByTagName("td");
		var m = tds[3].innerHTML;
		sum += parseFloat(m);
	}
	var total = document.getElementById("total");
	total.innerHTML = sum;

}
function change(btn,n) {
	var inputs = btn.parentNode.getElementsByTagName("input");
	var amount = parseInt(inputs[1].value);
	if(amount<=1 && n<0){
		return;
	}
	inputs[1].value = amount+n;
	amount = inputs[1].value;
	var tr = btn.parentNode.parentNode;
	var tds = tr.getElementsByTagName("td");
	var price = parseFloat(tds[1].innerHTML);
	var m = amount * price;
	tds[3].innerHTML = m;
	total();
}
</script>

<div class="container">
  <footer class="py-3 my-4">

    <ul class="nav justify-content-center border-bottom pb-3 mb-3">

    </ul>
    <p class="text-center text-muted">&copy; 2021-2022 Python,莫慧敏</p>
  </footer>
</div>


</body>
</html>